<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2023/6/13
  Time: 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        .layui_aaa{
            margin-top: 50px;
            margin-left: 200px;
        }
        .layui-input-groupi{
            margin-left: 60px;

        }
        .layui-input-group{
            margin-left: 300px;
            margin-top: -50px;
        }
        .layui_ccc{
            margin-left: 265px;
        }
    </style>
</head>
<body>
<div class="layui_aaa">
    <div  class="layui-input-groupi">
        <table>
            <tr>关键词搜索：&nbsp;</tr>
            <input type="text" placeholder="按关键词搜索" > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <tr>创建日期：&nbsp;</tr>
            <input type="date" >—<input type="date">
        </table>

    </div>
    <div class="layui-form">&nbsp;&nbsp;
        <div class="layui-form-item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
            <input type="radio" name="AAA" value="0" title="所有" lay-filter="demo-radio-filter" checked>
            <input type="radio" name="AAA" value="1" lay-filter="demo-radio-filter" title="支出">
            <input type="radio" name="AAA" value="2" lay-filter="demo-radio-filter" title="收入">
        </div>


        <table>

            <td>

                <div class="layui-input-group">
                    <p> &nbsp; &nbsp; &nbsp;分组搜索：</p>
                    <select class="layui_bbb">
                        <option value="">请选择</option>
                        <optgroup >
                            <option value="A-1">选项 A-1</option>
                            <option value="A-2">选项 A-2</option>
                            <option value="A-3">选项 A-3</option>
                        </optgroup>

                    </select>
                    <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-search">搜索</i>
                    </div>
                </div>
            </td>
        </table>
    </div>
</div>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/javascript">

    layui.use('table', function() {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 600
            , url: 'financeManager/getAllExpendAndIncome' //数据接口
            , page: true //开启分页
            , limit: 3
            , limits: [1, 2, 3]
            , toolbar: '#toolbarDemo',
            cols: [[ // 表头配置
                {field: 'expendStatus', title: '收入/支出', width: 130,templet:function(b){
                        return b.expendStatus == 1? "支出":"收入";
                    }}
                , {field: 'bussinessType', title: '业务类型', width: 135}
                , {field: 'projectName', title: '项目名称', width: 135}
                , {field: 'expendMoney', title: '交易金额', width: 175}
                , {field: 'expendDate', title: '交易时间', width: 100,sort: true}
                , {field: 'client', title: '相关客户', width: 135}
                , {field: 'orderNumber', title: '订单编号', width: 175}
                , {field: 'paymentNumber', title: '交易款号', width: 100}
                , {field: 'payWay', title: '付款方式', width: 135,templet:function(b){
                        if (b.payWay=="0"){
                            return "支付宝";
                        }else if (b.payWay=="1"){
                            return "微信";
                        } else {
                            return "刷卡";
                        }
                    }}
                , {field: 'proposer', title: '申请人', width: 135}
                , {field: 'remark', title: '附加备注', width: 100}
                , {field: '', title: '操作', width: 140, toolbar: "#barDemo"}
            ]]
        });
    });
</script>
</body>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.6/dist/layui.js"></script>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        // radio 事件
        form.on('radio(demo-radio-filter)', function(data){
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            console.log(value)
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            table.render({
                elem: '#demo'
                , height: 600
                , url: 'financeManager/getExpendAndIncomeByCond' //数据接口
                , page: true //开启分页
                , limit: 3
                , limits: [1, 2, 3]
                ,where:{
                    "expendStatus":value
                }
                , toolbar: '#toolbarDemo',
                cols: [[ // 表头配置
                    {field: 'expendStatus', title: '收入/支出', width: 130,templet:function(b){
                            return b.expendStatus == 1? "支出":"收入";
                        }}
                    , {field: 'bussinessType', title: '业务类型', width: 135}
                    , {field: 'projectName', title: '项目名称', width: 135}
                    , {field: 'expendMoney', title: '交易金额', width: 175}
                    , {field: 'expendDate', title: '交易时间', width: 100,sort: true}
                    , {field: 'client', title: '相关客户', width: 135}
                    , {field: 'orderNumber', title: '订单编号', width: 175}
                    , {field: 'paymentNumber', title: '交易款号', width: 100}
                    , {field: 'payWay', title: '付款方式', width: 135,templet:function(b){
                            if (b.payWay=="0"){
                                return "支付宝";
                            }else if (b.payWay=="1"){
                                return "微信";
                            } else {
                                return "刷卡";
                            }
                        }}
                    , {field: 'proposer', title: '申请人', width: 135}
                    , {field: 'remark', title: '附加备注', width: 100}
                    , {field: '', title: '操作', width: 140, toolbar: "#barDemo"}
                ]]
            });
            // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
        });
        // 通过表单提交事件，演示 radio 不同状态下的字段结果
        form.on('submit(demo-radio-submit)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</html>
